.signup {
  position: relative;
}

.signup-form-wrapper {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.signup-input {
  display: block;
  position: relative;
  z-index: 2;
  font-size: 18px;
  width: 100%;
  height: 44px;
  box-sizing: border-box;

  @media screen and (min-width: $bp-medium) {
    height: 50px;
  }
}

.signup-input {
  border-bottom: 2px solid $nonBlack;
  transition: opacity .2s ease-in-out;
  appearance: none;
  text-align: left;
  font-size: 16px;
  color: $nonBlack;
  transition: border-color .2s ease-in-out;
  margin-bottom: 30px;
  background: none;

  &::placeholder {
    font-size: 16px;
    color: $nonBlack;
  }

  &:focus::placeholder {
    opacity: 0;
  }
}

.signup-buttons {
  display: flex;
  align-items: center;

}

.signup-submit-button {
  @include buttonStyle(true);
  @include buttonColor();
  padding: 0;
  @include button-border(true);
  text-indent: -9999px;
  // background: url('/images/icon-right-dark.svg') no-repeat 50% 50%;
  // background-size: 16px auto;
  margin-top: 0;
  background-position: 50% !important;
}

.signup-download-button {
  align-self: flex-start;
  @include button-border;
  display: block;
  padding: 25px;
  border: 6px solid black !important;
  height: auto !important;

  & + img {
    width: 200px;
    margin-top: 40px;
  }

  @media screen and (min-width: $bp-medium) {
    border: 8px solid black !important;
    padding: 30px;
  }
}

.signup-download-button-text {
  @extend .h4;
  height: auto;
  line-height: 1;
  padding-left: 40px;
  background: url(/images/icon-diagonal-arrow-down.svg) no-repeat 0 bottom;
  background-size: 20px auto;
}

.signup-download-button-additional {
  font-size: 14px;
  height: auto;
  line-height: 1;
  padding-left: 40px;
}

.signup-error-message {
  font-size: 14px;
  font-weight: bold;
  color: $passion;
  text-align: left;
  opacity: 0;
  margin-left: 20px;
  transition: opacity .2s ease-in-out;
}

/* Status */

.signup-status-error {
  .signup-error-message {
    opacity: 1;
  }
  .signup-email-input,
  .signup-email-input:focus {
    border-color: $passion;
  }
}

.signup-status-success {
  .signup-form-wrapper {
    padding-bottom: 60px;
  }
}

.signup-email-input:focus,
.signup-status-sending .signup-email-input {
  border-color: $honey;
}
